<template>
  <div>
    <button @click="changeMsg">按钮</button>
    {{ msg }}
    <hr>
    {{ reverseMsg }}
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch, onMounted } from 'vue'
export default {
  // 运行在实例创建完成之前 这里面无法调用this
  setup (props, { attrs, slots, emit }) {
    // 通过reactive批量定义多个数据 结合 toRefs
    const data = reactive({
      msg: '你好vue3',
      reverseMsg: computed(() => data.msg.split('').reverse().join('')),
      /* reverseMsg: computed({
        get: () => data.msg.split('').reverse().join(''),
        set: (val) => {
          console.log(val, 222)
        }
      }), */
      msg2: '数据2',
      changeMsg: () => {
        data.msg = '数据改变啦'
      }
    })
    onMounted(() => {
      console.log('视图加载完成了，可以获取dom啦')
    })
    // 添加一个 msg的监听器
    watch(
      () => data.msg,
      (newVal, oldVal) => {
        console.log('侦听器触发啦', newVal)
      }
    )
    const dataRefs = toRefs(data)
    return {
      ...dataRefs
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
